<template>
  <div>
    <div class="myLineP">
      <div v-for='(item,index) in zxList' :key='index' :style="{'background-color':item.color,'width':(item.num/zxTotal)*100+'%'}"></div>
    </div>
  </div>
</template>

<script>
import {
  TransferDom,
  Popup,
  Checker,
  CheckerItem,
  Datetime,
  XButton
} from "vux";
export default {
  props: {
    zxList: {}
  },
  data() {
    return {
      zxTotal: 0
    };
  },
  mounted() {},
  watch: {
    zxList: {
      handler(val) {
        this.zxTotal = 0
        this.zxList.forEach(item => {
          this.zxTotal += item.num;
        });
      },
      deep: true
    }
  },
  methods: {}
};
</script>

<style lang="less" scoped>
.myLineP {
  width: 100%;
  border-radius: 0.2rem;
  height: 0.3rem;
  background-color: #439cf5;
  display: flex;
  overflow: hidden;
  margin: 0.3rem 0;
  > div {
    height: 100%;
    border-radius: 0.2rem;
  }
}
</style>